

$(function(){

  // 1.1 获取裁剪区域的 DOM 元素
  const $image = $('#image')
  
  // 1.2 配置选项
  const options = {
    // 纵横比
    aspectRatio: 1,
    // 指定预览区域
    preview: '.img-preview'
  }

  // 1.3 创建裁剪区域
  $image.cropper(options)


  // 为选择文件的按钮绑定事件
  $('#btnChooseImg').on('click', function(){
    $('#file').click()
  })


  // 监听文件选择框的change 事件
  $('#file').on('change',function(e){
    // e.target 指向事件的触发源 （触发事件的DOM对象）
    const files=e.target.files

    if(files.length===0)return

    // 不能直接把文件 作为img的src属性
    const imgURL=URL.createObjectURL(files[0])
    // 销毁旧的裁剪区
    $image.cropper('destroy')
    // 为img标签设置新的src属性值
    $image.attr('src',imgURL)
    // 重新初始化图片裁剪区域
    $image.cropper(options)
    console.log(files)
  })



  // 为上传头像按钮绑定点击处理函数

  $('#btnUploadImg').on('click',function(){

    // 获取到base64格式的图片（裁剪的结果）
    const base64Img = $image
    .cropper('getCroppedCanvas',{
      width:100,
      height:100
    })
    .toDataURL('image/png')
    // 发起请求更换用户头像
    $.post('/my/update/avatar',{avatar:base64Img},function(res){
      if (res.status === 0) {
        // 上传头像成功 刷新父窗口中头像
        window.parent.getUserInfo()
      }
      layer.msg(res.message)
    })
  })
})

